import {Component, EventEmitter, Input, OnDestroy, OnInit, Output} from "@angular/core";
import {CommService} from "../comm-service";
import {SharedService} from "../shared-service";
import {LocalStorageService} from "../local-storage-service";
import {MyhttpService} from "../myhttp.service";

@Component({
  template: `
    <div class="clsjbxx comp" [style.width]="compw" [style.height]="comph" [style.top]="topv"
         [style.left]="leftv">
      <div class="content">
        <div class="title">
          <div class="title_text">试卷包详情{{comptitle}}</div>
        </div>
        <div class="body">
          <div class="sjbRoom iecrollkf chromescrollkf">
            <table class="table table-bordered table-striped table-header-fixed">
              <thead>
              <tr>
                <th>考点名称</th>
                <th>试卷包名称</th>
                <th>试卷包状态</th>
              </tr>
              </thead>
              <tbody *ngIf="zdsjbxxShowlist.length">
              <tr *ngFor="let item of zdsjbxxShowlist">
                <td *ngIf="item.rowspan" [attr.rowspan]="item.rowspan" style="vertical-align: middle">{{item.kdmc}}</td>
                <td>{{item.sjbmc}}</td>
                <td><span [class]="item.bgcolor">{{item.ztmc}}</span></td>
              </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  `,
  styles: [
    ".clsjbxx{position:absolute;background-color:#fff;border:5px solid #ccc;}",
    ".content{width: calc(100%);height: calc(100%);}",
    ".content>.title{position: relative;width: 100%;height: auto;padding: 10px; border-bottom: 1px solid #ccc; color: rgb(138 143 151);}",
    ".title>.title_text{height: 15px;line-height: 15px;font-size: 15px;  width: auto;border-left: 5px solid #1477F3;padding-left: 10px}",
    ".content>.body{position: relative;width: 100%;height: calc(100% - 24px);padding: 10px 10px}",
    ".sjbRoom{width: calc(100% - 17px);height: 273px;overflow-y: auto}",
    ".bg_zc{background-color: #2196f2;color: #ffffff; display: inline-block;padding: 2px 15px;text-align: center}",
    ".bg_sl{background-color: #f2734a;color: #ffffff;display: inline-block;padding: 2px 15px;text-align: center}",
    ".bg_dl{background-color: #f19c2f;color: #ffffff;display: inline-block;padding: 2px 15px;text-align: center}",
    "td{text-align: center}",
  ]
})
export class YwclClsjbxxComponent implements OnInit, OnDestroy {
  compw: string = "0px";
  comph: string = "0px";
  topv: string = "0px";
  leftv: string = "0px";
  comptitle: string = "";
  frompage: string;
  activezdID: string = ""; //优化请求
  activeZd_bqIDs: string[] = []; // 高亮终端的计划标签id列表  优化请求
  zdsjbxxlist: any[] = [];//中间值
  zdsjbxxShowlist: any[] = []; // 绑定显示值
  ztmc_keyValue: any = {
    zc: '正常',
    dl: '多拉',
    sl: '少拉'
  };
  ztolor_keyValue: any = {
    zc: 'bg_zc',
    dl: "bg_dl",
    sl: "bg_sl"
  }

  /**
   *
   * activezdobj ---activezdobj
   * sszdxx {
   *  sfbd:  是否比对，0 不比对；1 比对
   *  sbbqidList:  实时上报的标签
   * }
   */
  hander(activezdobj: any, sszdxx: any): void {
    const sjbsl_jh = activezdobj.gldzbqidList;  // 高亮终端关联的标签id列表
    const sbjsl_ss = sszdxx.sbbqidList; // 高亮终端实时扫描到的标签id列表
    if (!this.activezdID) {
      //第一次某个终端高亮,sjbsl_jh有值，sbjsl_ss是实时变化的
      this.activezdID = activezdobj.id;
      this.init(sjbsl_jh, sbjsl_ss);
    } else {
      if (this.activezdID == activezdobj.id) {
        // 高亮终端没有变化， sjbsl_jh 值不变化， sbjsl_ss是实时变化的
        this.reload(sbjsl_ss);
      } else {
        // 高亮终端变化，sjbsl_jh值变化， sbjsl_ss是实时变化的
        this.activezdID = activezdobj.id;
        this.init(sjbsl_jh, sbjsl_ss);
      }
    }
  }

  /**
   * 切换高亮终端的处理
   * @param {string[]} sjbsl_jh  ----高亮终端关联的标签id列表
   * @param {string[]} sbjsl_ss  ----高亮终端实时扫描到的标签id列表
   */
  init(sjbsl_jh: string[], sbjsl_ss: string[]): void {
    this.activeZd_bqIDs = sjbsl_jh;
    const allbqidlist = this.activeZd_bqIDs.concat(sbjsl_ss ? sbjsl_ss : []);
    const allbqidlist_norepeat = this.commservice.fliterRepeat(allbqidlist);
    this.zdsjbxxlist = allbqidlist_norepeat.map((bqid) => {
      return {
        bqid: bqid,
        bqdjzt: 'zc',  //zc--正常  dl-多拉  sl--少拉  都是指的【试卷包--标签】的情况
        sjbmc: "", //试卷包名称
        mdkdmc: "", //目的地考点名称
        mdkdbh: "", //目的地考点编号
        sjxxlist: []  //  试卷包中的试卷信息
      }
    });
    //更新标签的状态
    this.zdsjbxxlist.forEach((item) => {
      const bqidv = item.bqid;
      if (this.activeZd_bqIDs.indexOf(bqidv) != -1) {
        //  正常/少拉
        if (sbjsl_ss && sbjsl_ss.length) {
          if (sbjsl_ss.indexOf(bqidv) != -1) {
            item.bqdjzt = "zc";
          } else {
            item.bqdjzt = "sl";
          }
        } else {
          item.bqdjzt = "sl";
        }
      } else {
        // 多拉
        item.bqdjzt = "dl";
      }
    });
    //获取标签关联的【试卷包】信息
    this.hander_sjbxx(allbqidlist_norepeat);
  }


  /**
   *  高亮终端不变化， 实时扫描信息的处理
   * @param {string[]} sbjsl_ss  高亮终端实时扫描到的标签id列表
   */
  reload(sbjsl_ss: string[]): void {
    const pre_zdsbjxxlist = this.zdsjbxxlist;
    const pre_zdbqidlist = pre_zdsbjxxlist.map((item) => {
      return item.bqid;
    });
    const allbqidlist = this.activeZd_bqIDs.concat(sbjsl_ss ? sbjsl_ss : []);
    const allbqidlist_norepeat = this.commservice.fliterRepeat(allbqidlist);
    this.zdsjbxxlist = allbqidlist_norepeat.map((bqid) => {
      if (pre_zdbqidlist.indexOf(bqid) != -1) {
        //上次已经有数据了
        return pre_zdsbjxxlist[pre_zdbqidlist.indexOf(bqid)];  // 标签状态要更新下，试卷包信息不需要更新（标签关联的试卷包是固定的）
      } else {
        return {
          bqid: bqid,
          bqdjzt: 'zc',  //zc--正常  dl-多拉  sl--少拉  都是指的【试卷包--标签】的情况
          sjbmc: "", //试卷包名称
          mdkdmc: "", //目的地考点名称
          mdkdbh: "", //目的地考点编号
          sjxxlist: []  //  试卷包中的试卷信息
        }
      }
    });
    // 更新标签状态（上次没数据的那部分）
    this.zdsjbxxlist.forEach((item) => {
      const bqidv = item.bqid;
      if (this.activeZd_bqIDs.indexOf(bqidv) != -1) {
        //  正常 或者  少拉
        if (sbjsl_ss && sbjsl_ss.length) {
          if (sbjsl_ss.indexOf(bqidv) != -1) {
            item.bqdjzt = "zc";
          } else {
            item.bqdjzt = "sl";
          }
        } else {
          item.bqdjzt = "sl";
        }
      } else {
        // 多拉
        item.bqdjzt = "dl";
      }
    });
    // 更新 试卷包信息（上次没有数据的那部分）
    const bqidlist = [];
    sbjsl_ss.forEach((bqid) => {
      if (pre_zdbqidlist.indexOf(bqid) == -1) {
        bqidlist.push(bqid);
      }
    });
    this.hander_sjbxx(bqidlist);
  }

  /**
   * 请求 标签关联的试卷包信息
   * @param {string[]} bqidlist
   */
  hander_sjbxx(bqidlist: string[]): void {
    this.zdsjbxxShowlist.length = 0;
    if (!bqidlist.length) {
      return
    }
    const reqobj = {
      dzbqidList: bqidlist,
      ksjhbh: this.localStorageService.get("hksjh")
    };
    const url = "sjgz/gjcx/cxbqglsjxx";
    this.itservice.kwPtPost(url, reqobj).subscribe(resp => {
      this.commservice.handResponse("get", url, resp, (arg1, resp, arg2) => {
        if (arg1) {
          if (arg2) {
            const dzbqGlSjxxListv = resp.dzbqGlSjxxList ? resp.dzbqGlSjxxList : [];
            if (!dzbqGlSjxxListv.length) {
              return
            }
            this.zdsjbxxlist.forEach((item) => {
              const bqid = item.bqid;
              dzbqGlSjxxListv.forEach((sjxx) => {
                if (bqid == sjxx.dzbqid) {
                  item.sjbmc = sjxx.sjbmc;  //标签关联试卷包  名称
                  item.mdkdmc = sjxx.mdkdmc; // 目的地名称
                  item.mdkdbh = sjxx.mdkdbh; // 目的地编号
                  const glSjxxListv = sjxx.glSjxxList ? sjxx.glSjxxList : [];  //试卷包中的试卷信息
                  item.sjxxlist = glSjxxListv;
                }
              });
            });
            this.showdata();
          }
        }
      });
    });
  }

  /**
   * 对 zdsjbxxlist 进行数据的处理以显示
   *
   * bqid: bqid,
   bqdjzt: 'zc',  //zc--正常  dl-多拉  sl--少拉  都是指的【试卷包--标签】的情况
   sjbmc: "", //试卷包名称
   mdkdmc: "", //目的地考点名称
   mdkdbh: "", //目的地考点编号
   sjxxlist: []  //  试卷包中的试卷信息
   */
  showdata(): void {
    console.log("zdsjbxxlist", this.zdsjbxxlist);
    if (!this.zdsjbxxlist.length) {
      return
    }
    const keyList = {}; // key--mdkdbh  List ---试卷包+试卷信息
    this.zdsjbxxlist.forEach((obj) => {
      const mdkdbh = obj.mdkdbh;
      if (!keyList[mdkdbh]) {
        keyList[mdkdbh] = [];
      }
      this.zdsjbxxlist.forEach((obj_inner) => {
        const mdkdbh_inner = obj_inner.mdkdbh;
        if (mdkdbh == mdkdbh_inner) {
          keyList[mdkdbh].push({
            mdkdmc: obj_inner.mdkdmc,
            bqid: obj_inner.bqid,
            bqdjzt: obj_inner.bqdjzt,
            sjbmc: obj_inner.sjbmc,
            sjxxlist: obj.sjxxlist
          })
        }
      });
    });
    for (let mdkdbh in keyList) {
      const sjbxxList = keyList[mdkdbh]; // 可能会重复
      const sjbxxList_norepeat = this.commservice.fliterobjRepeat(sjbxxList, "bqid");
      const sjbxxList_norepeatLeng = sjbxxList_norepeat.length;
      sjbxxList_norepeat.forEach((sjbxx, index) => {
        if (index == 0) {
          this.zdsjbxxShowlist.push({
            rowspan: sjbxxList_norepeatLeng,
            kdmc: sjbxx.mdkdmc,
            sjbmc: sjbxx.sjbmc,
            zt: sjbxx.bqdjzt,
            ztmc: this.ztmc_keyValue[sjbxx.bqdjzt],
            bgcolor: this.ztolor_keyValue[sjbxx.bqdjzt],
          })
        } else {
          this.zdsjbxxShowlist.push({
            sjbmc: sjbxx.sjbmc,
            zt: sjbxx.bqdjzt,
            ztmc: this.ztmc_keyValue[sjbxx.bqdjzt],
            bgcolor: this.ztolor_keyValue[sjbxx.bqdjzt],
          })
        }
      });
    }
  }


  getData(): void {
    const testdata = [{
      kdmc: "洪山区长虹中学",
      sjblist: [{
        sjbmc: "长虹中学26日上午1-1",
        zt: '正常',
        bgcolor: "bg_zc"
      }, {
        sjbmc: "长虹中学26日下午1-1",
        zt: '少拉',
        bgcolor: "bg_sl"
      }, {
        sjbmc: "长虹中学27日上午1-1",
        zt: '多拉',
        bgcolor: "bg_dl"
      }, {
        sjbmc: "长虹中学27日下午1-1",
        zt: '正常',
        bgcolor: "bg_zc"
      }]
    }, {
      kdmc: "石牌岭高级职业中学",
      sjblist: [{
        sjbmc: "石牌岭高级职业中学26日上午1-1",
        zt: '正常',
        bgcolor: "bg_zc"
      }, {
        sjbmc: "石牌岭高级职业中学26日下午1-1",
        zt: '正常',
        bgcolor: "bg_zc"
      }, {
        sjbmc: "石牌岭高级职业中学27日上午1-1",
        zt: '正常',
        bgcolor: "bg_zc"
      }, {
        sjbmc: "石牌岭高级职业中学27日下午1-1",
        zt: '正常',
        bgcolor: "bg_zc"
      }]
    }];
    // testdata.forEach((item) => {
    //   const sjblist = item.sjblist;
    //   sjblist.forEach((sjbxx, index) => {
    //     if (index == 0) {
    //       this.kdsjbxxList.push({
    //         rowspan: sjblist.length,
    //         kdmc: item.kdmc,
    //         sjbmc: sjbxx.sjbmc,
    //         zt: sjbxx.zt,
    //         bgcolor: sjbxx.bgcolor
    //       });
    //     } else {
    //       this.kdsjbxxList.push({
    //         kdmc: "",
    //         sjbmc: sjbxx.sjbmc,
    //         zt: sjbxx.zt,
    //         bgcolor: sjbxx.bgcolor
    //       });
    //     }
    //   });
    // });
  }

  /**
   * 组件在 显示面板中的位置+ 大小
   */
  initcompPositionSize_ctrshow(): void {
    // 位置 大小
    this.compw = this.o.compw + "px";
    this.comph = this.o.comph + "px";
    this.topv = this.o.topv + "px";
    this.leftv = this.o.leftv + "px";
    // 显示
    this.frompage = this.o.frompage;
    if (this.frompage === "ywcl") {
      this.activezdID = "";
    }
  }

  @Input() o: any;
  @Output() outhander: EventEmitter<any> = new EventEmitter();

  constructor(private commservice: CommService,
              private localStorageService: LocalStorageService,
              private itservice: MyhttpService,
              private sharedService: SharedService) {
    this.sharedService.changeEmitted$.subscribe(resp => {
      const actiontype = resp.actiontype;
      const data = resp.data;
      if (actiontype == "toggleActiveZd") {
        const activeZdobj = data.activezdobj;
        const ssbqidxxv = data.ssbqidxx;  //实时扫描到的标签id集合
        if (activeZdobj) {
          this.comptitle = `(${activeZdobj.zdmc})`;
          this.hander(activeZdobj, ssbqidxxv);
        }
      }
    });
  }

  ngOnInit() {
    this.commservice.log("-- 【 compkey=clsjbxx】--被父组件动态加载init....", this.o);
    this.initcompPositionSize_ctrshow();
  }

  ngOnDestroy() {

  }

}
